<template>
	<el-row class="search-bg">
		<el-form ref="search" :model="search" label-width="80px">
			<el-col :span="8" :push="1">
				<el-form-item label="课程状态">
					<el-select
						v-model="search.value"
						clearable
						placeholder="请选择课程状态">
						<el-option
							v-for="item in search.options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8" :push="4">
				<el-form-item label="课程名称">
					<el-input
						v-model="search.name"
						clearable
						placeholder="请输入"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="18" :push="1">
				<el-form-item label="上架日期">
					<el-date-picker
						v-model="search.date1"
						type="daterange"
						align="right"
						unlink-panels
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="search.pickerOptions">
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item>
					<el-button type="primary" size="medium">查 询</el-button>
					<el-button size="medium">重 置</el-button>
				</el-form-item>
			</el-col>
		</el-form>
	</el-row>
</template>

<script>
export default {
	data() {
		return {
			search: {
				value: "",
				options: [
					{
						value: "1",
						label: "全部",
					},
					{
						value: "2",
						label: "已上架",
					},
					{
						value: "3",
						label: "待上架",
					},
				],
				name: "",
				pickerOptions: {
					shortcuts: [
						{
							text: "今天",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "昨天",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近7天",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近30天",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
				date: "",
			},
		};
	},
};
</script>

<style lang="less" scoped>
.search-bg {
	padding-top: 20px;
	border-right: 5px;
	border: 1px solid rgba(233, 233, 233, 1);
	background-color: #ffffff;
}
</style>
